import { viteBundler } from "@vuepress/bundler-vite";
import { defaultTheme } from "@vuepress/theme-default";
import { defineUserConfig } from "vuepress";
// markdown-container 插件
// 为VuePress站点注册自定义容器
import { markdownContainerPlugin } from "@vuepress/plugin-markdown-container";

export default defineUserConfig({
  lang: "zh-CN",
  // title: "Element-Plus",
  description: "vuepress搭建的Element-Plus文档",

  bundler: viteBundler(),
  theme: defaultTheme({
    logo: "/element-plus-logo.svg",
    navbar: [
      {
        link: "/",
        text: "首页",
      },
      {
        link: "/install",
        text: "安装",
      },
      {
        link: "/button",
        text: "按钮",
      },
    ],
  }),

  plugins: [
    markdownContainerPlugin({
      type: "demo",
      locales: {
        "/": { defaultInfo: "DEMO" },
        "/zh/": { defaultInfo: "演示" },
      },
    }),
  ],

  extendsMarkdown: (md) => {
    md.use(markdownContainerPlugin, "demo", {
      validate(params) {
        return params.trim().match(/^demo\s*(.*)$/);
      },
      render(tokens, idx) {
        const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
        if (tokens[idx].nesting === 1) {
          const description = m && m.length > 1 ? m[1] : "";
          const content =
            tokens[idx + 1].type === "fence" ? tokens[idx + 1].content : "";
          return `<demo-block>
        ${description ? `<div>${md.render(description)}</div>` : ""}
        <!--element-demo: ${content}:element-demo-->
        `;
        }
        return "</demo-block>";
      },
    });
  },
});
